<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="Evernote Windows/303244 (zh-CN, DDL); Windows/10.0.14393 (Win64);"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 12pt;
    }
  </style>
</head>
<body>
<a name="589"/>

<div>
<span><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;">定义关键帧动画@keyframes</span></b></div><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;"><br/></span></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>@keyframes animationname{</div><div>     keyframes-selector{</div><div>          css-styles;</div><div>     }</div><div>}</div></div><div><b><br/></b></div><div>animationname：自定义动画名称</div><div>keyframes-selector：动画时长的百分比，或者快捷属性(from\to)，from代表0%  to代表100%</div><div>css-styles：CSS样式代码</div><div><br/></div><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;">执行动画animation</span></b></div><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;"><br/></span></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>语法：animation: name duration timing-function delay fill-mode iteration-count direction;</div></div><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;"><br/></span></b></div><div>name：对应animation-name属性，使给定动画名执行</div><div>duration：对应animation-duration属性，设置动画执行的总时长</div><div>timing-function：对应animation-timing-function属性，设置动画速度曲线</div><div>delay：对应animation-delay属性，设置动画执行延迟时间</div><div><span style="color: rgb(50, 135, 18);">以上四种属性值与transition属性值相同</span></div><div><span style="color: rgb(50, 135, 18);"><br/></span></div><div><span style="color: rgb(255, 0, 0);">iteration-count：对应animation-iteration-count属性，设置动画播放次数</span></div><div><span style="color: rgb(255, 0, 0);">direction：对应animation-direction属性，设置是否轮流反向播放动画</span></div><div><span style="color: rgb(255, 0, 0);">fill-mode：对应animation-fill-mode属性，设置动画结束时要应用的样式</span></div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>animation-iteration-count: n | infinite;</div><div><br/></div><div>n：动画执行次数数值</div><div>infinite：循环播放</div></div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>animation-direction:normal | alternate;</div><div><br/></div><div>normal：正常播放</div><div>alternate：轮流反向播放</div></div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>animation-fill-mode: none | forwards | backwards;</div><div><br/></div><div>none：让动画应用动画开始前的状态</div><div>forwards:让动画应用最后一帧样式</div><div>backwards：让动画应用第一帧样式</div></div><div><br/></div><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;">无过渡逐帧动画设置steps()</span></b></div><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;"><br/></span></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>语法：animation-timing-function:steps(n,start | end);</div><div><br/></div><div>timing-function属性值中可以不仅可以使用贝塞尔曲线函数，还是可以使用阶跃函数steps()</div><div>该函数功能可以将动画变为逐帧无过渡动画，类似GIF跳转动画</div><div>n：动画帧数</div><div>start：播放的第一帧从第一帧动画结束播放</div><div>end：播放的第一帧从第一帧动画开始播放</div></div><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;"><br/></span></b></div><div><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;"><b>设置动画播放状态animation-play-state</b></span></div><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;"><br/></span></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>语法：animation-play-state:pause | running;</div><div><br/></div><div>pause：暂停</div><div>running：播放</div><div><span style="color: rgb(255, 0, 0);">注意：该属性不能写入animation综合属性中，只能单独使用</span></div></div><div><br/></div><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;">JS中的webkitAnimationEnd和animationEnd事件当关键帧动画执行完毕后触发</span></b></div><div><b><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;"><br/></span></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>element.addEventListener(&quot;webkitAnimationEnd&quot;,fn,false); //chrome&amp;safari</div><div>element.addEventListener(&quot;animationEnd&quot;,fn,false);  //firefox</div></div></span>
</div></body></html> 